<template>
  <div>
    <div style="padding: 20px">
      <!-- <a-timeline>
        <a-timeline-item color="gray" :style="{ color: `${formState.status == 1 ? 'white' : ''}` }">
          <template #dot>
            <div class="dot" v-if="formState.status == 0"></div>
          </template>
          {{ formState.createTime }}
          {{ formState.createUser }}
          已创建
        </a-timeline-item>
        <a-timeline-item color="gray" :style="{ color: `${formState.status == 1 ? 'white' : ''}` }">
          <template #dot>
            <div class="dot" v-if="formState.status == 1"></div>
          </template>
          {{ formState.approveTime }}
          {{ formState.approvePerson }}
          {{ formState.status >= 1 ? '已审批' : '待审批' }}
        </a-timeline-item>
        <a-timeline-item color="gray" :style="{ color: `${formState.status == 2 ? 'white' : ''}` }">
          <template #dot>
            <div class="dot" v-if="formState.status == 2"></div>
          </template>
          {{ formState.receivingTime }}
          {{ formState.receivingPerson }}
          {{ formState.status >= 2 ? '已签收' : '待签收' }}
        </a-timeline-item>
        <a-timeline-item color="gray" :style="{ color: `${formState.status == 3 ? 'white' : ''}` }">
          <template #dot>
            <div class="dot" v-if="formState.status == 3"></div>
          </template>
          {{ formState.feedbackTime }}
          {{ formState.feedbackPerson }}
          {{ formState.status >= 3 ? '已反馈' : '待反馈' }}
        </a-timeline-item>
        <a-timeline-item color="gray" :style="{ color: `${formState.status == 4 ? 'white' : ''}` }">
          <template #dot>
            <div class="dot" v-if="formState.status == 4"></div>
          </template>
          {{ formState.finishTime }}
          {{ formState.status >= 4 ? '已完成' : '待完成' }}
        </a-timeline-item>
      </a-timeline> -->
      <a-timeline>
        <a-timeline-item
          v-for="(item, index) in formState"
          :key="item.processBasicId"
          :style="{ color: `${index == formState.length - 1 ? 'white' : ''}` }"
          color="gray"
        >
          <template #dot>
            <div class="dot" v-if="index == formState.length - 1"></div>
          </template>
          {{ item.createTime }}
          {{ item.createUser }}
          {{ item.status }}
        </a-timeline-item>
      </a-timeline>
    </div>
  </div>
</template>
<script lang="ts">
import { ref, defineComponent } from 'vue';
export default defineComponent({
  props: {
    formState: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  setup() {
    let msg = ref('');
    return {
      msg,
    };
  },
});
</script>
<style lang="less" scoped>
.dot {
  width: 10px;
  height: 10px;
  background: #3674f6;
  border-radius: 50%;
}
</style>
